<template>
	<view class="pageBox">
		<!--朋友圈发布-->
		
		<view class="padding-bj flex justify-between align-center">
			<view class="text-30">上传图片</view>
		</view>
		
		<view class="grid col-4 grid-square flex-sub padding-lr-bj">
			<view v-if="params.images.length > 0"
				v-for="(item, index) in params.images"
				:key="index">
				<view class="item" @tap="handlePreview(index)">
					<image :src="item" mode="widthFix"></image>
				</view>
				<view class="tag" @tap="handleDelImage(index)">
					<image src="/static/images/delete.png" style="width: 46rpx;height: 46rpx;"></image>
				</view>
			</view>
			
			<view v-if="params.images.length < 9" @tap="handleImage()">
				<view class="item">
					<view class="text-lg text-gray">
						<text class="wlIcon-tianjia"></text>
						<view v-if="params.images.length === 0" class="margin-top-xs text-sm">添加图片</view>
						<view v-else class="margin-top-xs text-sm">继续添加</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 朋友圈内容 -->
		<view class="padding-bj flex justify-between align-center">
			<view class="text-30">
				<text class="wlIcon-xiugaioryijian margin-right-xs text-bold"></text>
				朋友圈内容
			</view>
		</view>
		
		<view class="padding-bj bg-gray margin-lr-bj radius-bock">
			<editor
				id="editor"
				@ready="onEditorReady"
				@input="onEditorInput"
				placeholder="编辑朋友圈文案~"
			/>
		</view>
		
		<!-- 底部 -->
		<view class="safeAreaBottom"></view>
		
		<view>
			<view class="cu-bar tabbar foot flex flex-direction">
				<button class="cu-btn bg-red lg" @tap="handleSubmit">
					发布朋友圈
				</button>
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			dataList:[],
			requestStatus : false, //请求状态，防止重复提交
			
			params: {
				type: null,
				content: '',
				images: []
			},
		}
	},
	onLoad() {
		
	},
	onShow(){
		
	},
	methods: {
		handlePreview(index) {
			uni.previewImage({
				urls: this.params.images,
				current: this.params[index],
				indicator: 'number'
			});
		},
		handleDelImage(index) {
			this.params.images.splice(index, 1);
		},
		onEditorInput(e) {
			this.params.content = e.detail.html;
		},
		onEditorReady() {
			// #ifdef APP-PLUS || H5 ||MP-WEIXIN
			uni.createSelectorQuery()
				.select('#editor')
				.context(res => {
					this.editorCtx = res.context;
				})
				.exec();
			// #endif
		},
		handleImage() {
			let count = 9 - this.params.images.length;
			
			uni.chooseImage({
				count: count, //默认9
				sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album"], //从相册选择
				crop: {
					quality: 60
				},
				success: res => {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						this.uploadImage(res.tempFilePaths[i]).then(uploadImageRes=>{
							this.params.images.push(uploadImageRes.fullurl);
						});
					}
				}
			});
			
		},
		// 图片处理-上传图片
		async uploadImage(url) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.request({
					url: '/wanlshop/common/uploadData',
					success: updata => {
						uni.uploadFile({
							url: updata.data.uploadurl,
							filePath: url,
							name: 'file',
							formData: updata.data.storage == 'local' ? null : updata.data.multipart,
							success: res => {
								console.log(JSON.parse(res.data).data);
								that.$wanlshop.msg("上传成功");
								resolve(JSON.parse(res.data).data);
							},
							fail: error =>{
								that.$wanlshop.msg(JSON.parse(error.data).msg);
							}
						});
					}
				});
				
			}).catch(e => {
				console.log(e);
			});
		},
		
		// 发布
		async handleSubmit() {
			let that = this;
			const params = this.params;
			if(params.images.length === 0){
				this.$wanlshop.msg('至少添加一张图片');
				return;
				
			}
			if(!params.content){
				this.$wanlshop.msg('请编辑朋友圈详情~');
				return;
			}
		
			// 请求完成前 按钮点击将不会继续执行此函数
			if(this.requestStatus){
				// 利用 return 终止函数继续运行
				return false;
			}
		
			this.requestStatus = true;
			
			uni.request({
				url: '/friendscircle/addcircle',
				data: {
					images: this.params.images.join(","),
					content: this.params.content,
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						that.$wanlshop.msg('发布成功！');
						setTimeout(function(){
							uni.redirectTo({
								url: '/pages/new/find/list'
							})
						}, 800);
					}else{
						that.$wanlshop.msg('网络异常，请稍后在试');
					}
					
					this.requestStatus = false;
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.padding-bj{
	padding: 26rpx;
}

.grid {
    display: flex;
    flex-wrap: wrap;
	position: relative;
}

.grid.grid-square {
    overflow: hidden;
}

.padding-lr-bj {
    padding-left: 26rpx;
    padding-right: 26rpx;
}

.grid.col-4.grid-square>uni-view {
    padding-bottom: calc((100% - 64rpx)/4);
    height: 0;
    width: calc((100% - 64rpx)/4);
}

.grid .item{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 18rpx;
    overflow: hidden;
    background-color: #f0f0f0;
}

.radius-bock {
    border-radius: 9px;
    overflow: hidden;
}

.margin-lr-bj {
    margin-left: 26rpx;
    margin-right: 26rpx;
}

.safeAreaBottom {
    height: 106rpx;
    height: calc(env(safe-area-inset-bottom) + 106rpx);
    width: 100%;
}
.tabbar{
    z-index: 1;
    background-color: transparent;
}

.cu-bar.foot {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1;
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
}

.tabbar .cu-btn{
    width: calc(100% - 52rpx);
    font-size: 34rpx;
    height: 80rpx;
}

.tag {
	position: absolute;
	top: 0rpx;
	right: 0rpx;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
}
</style>